<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="90px">
        <el-form-item label="业务编号">
          <el-input v-model="listQuery.projectName" placeholder="业务编号" />
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.projectName" placeholder="项目名称" />
        </el-form-item>
        <el-form-item label="所在区县">
          <el-select @change="changePage(1)" placeholder="所在区县" v-model="listQuery.districtId">
            <el-option v-for="(item, index) in districtData" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="filter-container">
      <el-button class="filter-item" type="primary">一键审签（同意）</el-button>
      <el-button class="filter-item" type="danger">一键审签（不同意）</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column prop="businessNumber" label="业务编号"></el-table-column>
      <el-table-column prop="district" label="所在区县"></el-table-column>
      <el-table-column prop="projectType" label="项目类型"></el-table-column>
      <el-table-column prop="projectLevel" label="项目级别"></el-table-column>
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="previousProcessCommitTime" label="上一流程提交时间"></el-table-column>
      <el-table-column prop="submitter" label="提交人"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    
  </div>
</template>

<script>
import { queryAllDistrict } from "@/api/project/xmkgh/xmspread";
import { getList } from "@/api/project/xmkgh/buntchCheckGbcAndCity";

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        businessNumber: null,
        projectName: null,
        district: null
      },
      districtData: []
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery).then(res => {
        this.listLoading = false;
        this.list = res.data.rows;
        this.total = res.data.total;
      });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    },
    queryAllDistrict() {
      queryAllDistrict().then(res => {
        this.districtData = res.data;
      });
    }
  },
  created() {
    this.queryAllDistrict();
    this.fetchData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #999;
}
</style>